<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { fetchGetCollegeList } from "@/api/public";
import { onMounted, reactive } from "vue";
const xData = reactive([])
const yData1 = reactive([])
const yData2 = reactive([])
onMounted(() => {
  getCollegeData()
})
// 获取学院数据
const getCollegeData = async () => {
  const res = await fetchGetCollegeList()
  res.data.data.forEach(item => {
    xData.push(item.name)
    yData1.push(item.totalNumber)
    yData2.push(item.joinedNumber)
  })
}


const option = reactive({
  tooltip: {//提示框组件
    trigger: 'axis',//触发类型 柱状图
    axisPointer: { type: 'shadow' } //触发效果 移动上去 背景效果
  },
  grid: {
    top: '15%',
    left: '10%',
    bottom: '10%',
    right: '5%',
  },
  xAxis: [//x轴
    {
      type: 'category',//坐标轴类型 离散
      data: xData,//数据
      axisTick: false,//是否显示刻度
      axisLine: {//坐标轴样式
        show: true,//是否显示
        lineStyle: {//线的样式
          type: 'dashed'//线的类型 虚线
        },
      },
      axisLabel: {
        color: "#DEDEDE"
      }
    },
  ],
  yAxis: [//y轴
    {
      name: '人',//名称
      type: 'value',//连续类型
      axisLine: {//坐标轴样式
        show: false, //不显示
      },
      splitLine: {//分隔辅助线
        lineStyle: {
          type: 'dashed',//线的类型 虚线0
          opacity: 0.2//透明度
        },
      },
      axisLabel: {
        color: "#DEDEDE"
      }
    },
  ],
  series: [//系统列表   
    {
      name: '总人数',//名称
      type: 'bar',//类型
      barWidth: 11,//宽度
      data: yData1,//数值
      z: 2,
      itemStyle: {
        color: {//渐变色
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          type: 'linear',
          global: false,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(6, 244, 231)',
            },
            {
              offset: 1,
              color: 'rgba(6, 244, 231,0)',
            },
          ],
        },
      },
    },
    {
      name: '入团人数',
      type: 'bar',
      barWidth: 11,
      data: yData2,
      z: 1,
      itemStyle: {
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          type: 'linear',
          global: false,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(3, 181, 243)',
            },
            {
              offset: 1,
              color: 'rgba(2, 190, 251,0)',
            },
          ],

        },
      },
    },
  ],
  legend: {
    right: '70',
    textStyle: {
      // 图例文字的样式
      color: '#fff',
      fontSize: 14,
      padding: [2, 0, 0, 2],
      fontWeight: 100,
    },
  },
})

</script>

<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
